<template>
    <div>
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>请假中心</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="margin-top: 10px;"></div>
            <div>
                <p>等待审批：</p>
                <div class="scrollbar-demo-item important" v-for="(item, i) in noleave" :key="i">
                    <div class="edititem">{{ item.create_time }}</div>
                    <div class="edititem">{{ item.reson }}</div>
                    <div class="edititem"><el-button type="primary" @click="showdialog(item.id)">审批</el-button></div>
                </div>
            </div>
            <div style="margin-top: 20px;">
                <el-badge value="10" class="item">
                    <el-button>请假记录</el-button>
                </el-badge>
                <el-scrollbar height="180px">
                    <div class="scrollbar-demo-item" v-for="(item, i) in leavelist" :key="i">
                        <div class="edititem">{{ item.create_time }}</div>
                        <div class="edititem">{{ item.reson }}</div>
                        <div class="edititem">
                            <el-tag type="primary" size="large" v-if="item.isleave == 1">通过</el-tag>
                            <el-tag type="danger" size="large" v-if="item.isleave == 2">拒绝</el-tag>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div>
        <el-dialog v-model="showdal" title="审批" width="500" :before-close="closedal">
            <el-form :model="leaveinfo" label-width="auto" style="max-width: 600px" ref="leaveref">
                <el-form-item label="是否确认请假">
                    <el-switch v-model="leaveinfo.isleave"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-value="1"
                        inactive-value="2" />
                </el-form-item>
                <el-form-item label="原因">
                    <el-input v-model="leaveinfo.tinfo" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closedal">取消</el-button>
                    <el-button type="primary" @click="queryleave">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import { tecleave, gettecleave } from '@/apis/leave';
import { ElMessage } from 'element-plus';
// @ts-ignore
import { Userstore } from '@/stores/user.js';
const showdal = ref(false)
const id = ref<any>(0)
const leaveref = ref<any>(null)
const leaveinfo = ref({
    tinfo: '',
    isleave: '2'
})
const userstore = Userstore()
const leavelist = ref<any>([])
const noleave = ref<any>([])
const getleavelist = async () => {
    const res = await gettecleave({ teacherid: userstore.userinfo.teacherid })
      console.log(res);
    leavelist.value = res.data.leave.filter((item: any) => item.isleave != 0)
    noleave.value = res.data.leave.filter((item: any) => item.isleave == 0)
    console.log(res);
    
}
const showdialog = (val: any) => {
    id.value = val
    showdal.value = true
}
const closedal = () => {
    showdal.value = false
    leaveinfo.value = {
        tinfo: '',
        isleave: '2'
    }
}
const queryleave = async () => {
    console.log(leaveinfo.value,id);
    
    const res = await tecleave({ ...leaveinfo.value, id:id.value })
    if (res.data.status != 200) return ElMessage({ type: 'error', message: '请假失败' })
    closedal()
    getleavelist()
}
onMounted(() => {
    getleavelist()
})
</script>
<style lang='scss' scoped>
.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}

.important {
    color: red;
}

.edititem {
    width: 50%;
    height: 100%;
    line-height: 40px;
    text-align: center;
}
</style>